<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>贴标历史查询</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- App css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style_dark.css" rel="stylesheet" type="text/css" />

    <!-- layer插件 -->
    <link rel="stylesheet" type="text/css" href="plugins/layer2.4/skin/layer.css" />
    <link rel="stylesheet" type="text/css" href="plugins/layui2/css/layui.css" />

    <!-- datatables插件 -->
    <link href="plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
    <script src="assets/js/modernizr.min.js"></script>
    <style>
        a {
            color: #007bff;
        }
        
        .search_box_container {
            display: flex;
            margin-top: 15px;
        }
        
        .myLabel {
            width: 80px;
        }
        
        .card-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-bottom: 0;
        }
        
        .search-btn {
            margin-top: 15px;
        }
    </style>
</head>

<body>

    <!-- Begin page -->
    <div id="wrapper">

        <!-- ========== 左边侧边栏代码 ========== -->
        <div class="left side-menu">

            <div class="slimscroll-menu" id="remove-scroll">

                <!-- LOGO -->
                <div class="topbar-left">
                    <a href="index.html" class="logo">
                        <span>
                            <img src="assets/images/logo.png" alt="" height="22">
                        </span>
                        <i>
                            <img src="assets/images/logo_sm.png" alt="" height="28">
                        </i>
                    </a>
                </div>

                <!-- 用户区域 -->
                <div class="user-box">
                    <!-- <div class="user-img">
							<img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle img-fluid">
						</div>
						<h5><a href="#">超级管理员</a> </h5>
						<p class="text-muted">超管</p> -->
                </div>

                <!--- 侧边菜单 -->
                <div id="sidebar-menu">

                    <ul class="metismenu" id="side-menu">
                    </ul>

                </div>
                <!-- Sidebar -->

                <div class="clearfix"></div>

            </div>
            <!-- Sidebar -left -->

        </div>
        <!-- Left Sidebar End -->

        <!-- ============================================================== -->
        <!-- 页面内容开始 -->
        <!-- ============================================================== -->

        <div class="content-page">

            <!-- 头部横条 -->
            <div class="topbar">

                <nav class="navbar-custom">

                    <ul class="list-unstyled topbar-right-menu float-right mb-0">
                        <!-- 通知 -->
                        <li class="dropdown notification-list">
                            <!-- <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
                                aria-haspopup="false" aria-expanded="false">
                                <i class="fi-bell noti-icon"></i>
                                <span class="badge badge-danger badge-pill noti-icon-badge">4</span>
                            </a> -->
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">

                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h5 class="m-0"><span class="float-right"><a href="" class="text-dark"><small>Clear
                                                    All</small></a> </span>Notification</h5>
                                </div>

                                <div class="slimscroll" style="max-height: 230px;">
                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-success"><i class="mdi mdi-comment-account-outline"></i></div>
                                        <p class="notify-details">Caleb Flakelar commented on Admin<small class="text-muted">1 min ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info"><i class="mdi mdi-account-plus"></i></div>
                                        <p class="notify-details">New user registered.<small class="text-muted">5 hours
                                                ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-danger"><i class="mdi mdi-heart"></i></div>
                                        <p class="notify-details">Carlos Crouch liked <b>Admin</b><small class="text-muted">3 days ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-warning"><i class="mdi mdi-comment-account-outline"></i></div>
                                        <p class="notify-details">Caleb Flakelar commented on Admin<small class="text-muted">4 days ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-purple"><i class="mdi mdi-account-plus"></i></div>
                                        <p class="notify-details">New user registered.<small class="text-muted">7 days
                                                ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-custom"><i class="mdi mdi-heart"></i></div>
                                        <p class="notify-details">Carlos Crouch liked <b>Admin</b><small class="text-muted">13 days ago</small></p>
                                    </a>
                                </div>

                                <!-- All-->
                                <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
                                    View all <i class="fi-arrow-right"></i>
                                </a>

                            </div>
                        </li>

                        <li class="dropdown notification-list tabUser">
                            <a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <img src="assets/images/users/avatar-1.jpg" alt="user" class="rounded-circle"> <span class="ml-1">超级管理员<i class="mdi mdi-chevron-down"></i> </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h6 class="text-overflow m-0">欢迎使用</h6>
                                </div>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="fi-head"></i> <span>我的信息</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="fi-lock"></i> <span>锁屏</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="fi-power"></i> <span>退出</span>
                                </a>

                            </div>
                        </li>

                    </ul>
                    <!-- 导航  -->
                    <ul class="list-inline menu-left mb-0">
                        <li class="float-left">
                            <button class="button-menu-mobile open-left disable-btn">
                                <i class="dripicons-menu"></i>
                            </button>
                        </li>
                        <li>
                            <div class="page-title-box">
                                <h4 class="page-title"> 贴标历史管理 </h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#">贴标历史管理</a></li>
                                    <li class="breadcrumb-item active">贴标历史查询</li>
                                </ol>
                            </div>
                        </li>

                    </ul>

                </nav>

            </div>
            <!-- 头顶标签结束 -->

            <!-- Start Page content -->
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="card-box">
                                <div class="card-body card-box">
                                    <form class="form-inline card-box">
                                        <div class="search_box_container">
                                            <!-- <div class="search_box"> -->
                                            <div class="form-group col-md-3">
                                                <label for="stallName" class="myLabel">档口名称</label>
                                                <input type="text" class="form-control" id="stallName" name="stallName" placeholder="全部">
                                            </div>
                                            <div class="form-group col-md-3">
                                                <label for="linkName" class="myLabel">联系人</label>
                                                <input type="text" class="form-control" id="linkName" name="linkName" placeholder="联系人">
                                            </div>
                                            <!-- </div> -->
                                            <!-- <div class="search_box"> -->
                                            <div class="form-group col-md-3">
                                                <label for="startDate" class="myLabel">开始时间</label>
                                                <input type="text" class="form-control" id="startDate" name="startDate" placeholder="">
                                            </div>
                                            <div class="form-group col-md-3">
                                                <label for="endDate" class="myLabel">结束时间</label>
                                                <input type="text" class="form-control" id="endDate" name="endDate" placeholder="">
                                            </div>
                                            <!-- </div> -->


                                        </div>
                                        <button class="btn btn-primary search-btn" type="button" onclick="searchBtn()"><i class="fa fa-search"></i>查询</button>

                                    </form>
                                    <!-- 总数表 -->
                                    <div class="card-body">
                                        <table id="tableSum" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                            <thead id="tableSumHead">
                                            </thead>

                                            <tbody id="tableSumBody">
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- 每天表 -->
                                    <div class="card-body">
                                        <table id="tableCount" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                            <thead id="tableCountHead">
                                            </thead>

                                            <tbody id="tableCountBody">
                                            </tbody>
                                        </table>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>
                <!-- end row -->
            </div>
            <!-- container -->

        </div>
        <!-- content -->

        <footer class=" footer">

        </footer>

    </div>

    <!-- ============================================================== -->
    <!-- End Right content here -->
    <!-- ============================================================== -->

    </div>
    <!-- END wrapper -->

    <!-- jQuery  -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/navigate.js"></script>
    <script>
        var roleName = getCookie("roleName")
        createNavigate(roleName)
    </script>
    <script src="assets/js/metisMenu.min.js"></script>
    <script src="assets/js/waves.js"></script>
    <script src="assets/js/jquery.slimscroll.js"></script>

    <!-- App js -->
    <script src="assets/js/jquery.core.js"></script>
    <script src="assets/js/jquery.app.js"></script>

    <!-- layer插件 -->
    <script src="plugins/layer2.4/layer.js" type="text/javascript" charset="utf-8"></script>
    <script src="plugins/layui2/layui.js" type="text/javascript" charset="utf-8"></script>

    <!-- datatables插件 -->
    <script src="plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap4.min.js"></script>
    <script src="plugins/datatables/dataTables.responsive.min.js"></script>
    <script src="plugins/datatables/responsive.bootstrap4.min.js"></script>
    <script src="assets/js/custom.js" type="text/javascript" charset="utf-8"></script>


    <!-- datatables插件 -->
    <script type="text/javascript">
        $(function() {
            // 初始化
            init()
            layui.use('laydate', function() {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#startDate', //指定元素
                });
                // offlineTime
                laydate.render({
                    elem: '#endDate', //指定元素
                });
            })
        })

        function searchBtn() {
            let stallName = $("#stallName").val()
            let linkName = $("#linkName").val()
            let startDate = $("#startDate").val()
            let endDate = $("#endDate").val()
            if (Date.parse(startDate) > Date.parse(endDate)) {
                alert('起始时间要小于结束时间')
                return
            }
            let str = '?'
            if (stallName) {
                str += `stallName=${stallName}&`
            }
            if (linkName) {
                str += `linkName=${linkName}&`
            }
            if (startDate) {
                str += `startDate=${startDate}&`
            }
            if (endDate) {
                str += `endDate=${endDate}&`
            }
            params = str.slice(0, str.length - 1)
            console.log(params)
                // 重新调用
            refreshTableSum(params)
            refreshTableCount(params)
        }

        function init() {
            // 处理时间
            let date = new Date()
            let endDate = formatTime(date)
            let [year, month0, day] = endDate.split('-')
            month = (date.getMonth()) < 10 ? '0' + (date.getMonth()) : (date.getMonth());
            let startDate = `${year}-${month}-${day}`
                // $("#stallName").val('全部')
            startDate = $("#startDate").val(startDate)
            endDate = $("#endDate").val(endDate)
            initTableSum()
            initTableCount()
        }
        // 总数
        function initTableSum(params) {
            let myUrl = `${URL}PoultrySales/findDefaultCountsByTime`
            if (params) {
                myUrl = `${URL}PoultrySales/findCountByNameAndTime${params}`
            }
            $.ajax({
                type: 'GET',
                url: myUrl,
                dataType: "json",
                async: false,
                url: myUrl,
                success: function(data) {
                    if (data.status != 200) {
                        $('#tableSum').parent().addClass('hidden')
                        return
                    }
                    data = data.object
                    if (data.length == 0) {
                        $('#tableSum').parent().addClass('hidden')
                        return
                    }
                    $('#tableSum').parent().removeClass('hidden')
                    let ths = '<th></th>',
                        tds = '<td>总数</td>',
                        // 禽类合计
                        typeNumSum = 0
                    for (let i = 0; i < data.length; i++) {
                        for (let key in data[i]) {
                            if (data[i][key] == null) {
                                data[i][key] = '';
                            }
                        }
                        ths += `<th>${data[i].poultry_parent_name}</th>`
                        tds += `<td>${data[i].sale_count}</td>`
                        typeNumSum += data[i].sale_count
                    }

                    let thead = ` <tr>${ths}<th>全部禽类总数</th></tr>`,
                        tbody = `<tr class="text-c">${tds}<td>${typeNumSum}</td></tr>`
                    $("#tableSumHead").html(thead)
                    $("#tableSumBody").html(tbody)

                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $("#tableSumBody").html('')
                    alert('请求设备状态失败')

                }
            });
            tableSum = $('#tableSum').DataTable({
                retrieve: true,
                "pageLength": 6,
                "lengthMenu": [6],
                ordering: false,
                "lengthChange": false,
                "searching": false,
            })
        }
        // 每日数
        function initTableCount(params) {
            let myUrl = `${URL}PoultrySales/findDefaultCountsByTimeInDays`
            if (params) {
                myUrl = `${URL}PoultrySales/findCountByNameAndTimeByDays${params}`
            }
            $.ajax({
                type: "GET",
                url: myUrl,
                async: false,
                dataType: "json",
                success: function(data) {
                    if (data.status == 2) {
                        $('#tableCount').parent().addClass('hidden')
                        return
                    }
                    data = data.object
                    console.log(data)
                    let ths = '<th>日期</th>',
                        tds = ''
                    $('#tableCount').parent().removeClass('hidden')
                        // 获取种类
                    let typeLen = data[0].poultryParentList.length
                    for (let i = 0; i < typeLen; i++) {
                        ths += `<th>${data[0].poultryParentList[i].poultry_parent_name}</th>`
                    }
                    for (let i = 0; i < data.length; i++) {
                        for (let key in data[i]) {
                            if (data[i][key] == null) {
                                data[i][key] = '';
                            }
                        }
                        tds += `<tr class="text-c"><td>${data[i].date}</td>`
                        let typeNumSum = 0
                        for (let j = 0; j < typeLen; j++) {
                            let count = data[i].poultryParentList[j].sale_count
                            tds +=
                                `<td>${count}</td>`
                            typeNumSum += count
                        }
                        tds += `<td>${typeNumSum}</td></tr>`
                    }
                    let thead = ` <tr>${ths}<th>当天禽类总数</th></tr>`,
                        tbody = `${tds}`
                    $("#tableCountHead").html(thead)
                    $("#tableCountBody").html(tbody)


                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('请求禽类销售情况失败')
                    $("#tableCountBody").html('')
                    return
                }
            });
            tableCount = $('#tableCount').DataTable({
                retrieve: true,
                "pageLength": 6,
                "lengthMenu": [6],
                ordering: false,
                "lengthChange": false,
                "searching": false,
            });
        }
        // 重建设备状态表
        function refreshTableSum(params) {
            tableSum.clear(); //销毁datatable
            tableSum.destroy(); //销毁datatable
            initTableSum(params) //重新加载数据
        }
        // 重建销售终端表
        function refreshTableCount(params) {
            tableCount.clear(); //销毁datatable
            tableCount.destroy(); //销毁datatable
            initTableCount(params) //重新加载数据
        }
    </script>

</body>

</html>